<template>
  <div class="aggregatePage">
    <el-container>
      <el-header style="padding:0"><Header /></el-header>
			<el-container>
        <el-aside width="200px"><UserMenu /></el-aside>
        <el-container>
					<el-main >
						<el-steps :active="active">
							<el-step title="集结（单算子）" icon="el-icon-edit"></el-step>
							<el-step title="中间指标" icon="el-icon-upload"></el-step>
							<el-step title="最后得分" icon="el-icon-picture"></el-step>
						</el-steps>
						
						<div v-if="active == 0" >
							<!-- 导入数据 -->
							<div class="borderSingle singlePadding">
								
								<h5>导入数据</h5>
								<el-form ref="form" :model="aggregateForm" label-width="80px">
									<el-form-item label="导入数据">
										<el-radio-group v-model="radio1" size="medium">
											<el-radio-button label="手动输入数据"></el-radio-button>
											<el-radio-button label="从Excel中导入数据"></el-radio-button>
											<el-radio-button label="从大数据中导入数据(暂未开发)" disabled></el-radio-button>
										</el-radio-group>
									</el-form-item>
									<el-form-item v-if="radio1 == '手动输入数据'">
										<el-input
											style="width:600px;"
											type="textarea" :autosize="{ minRows: 5, maxRows: 5}" placeholder="请输入内容"
											v-model="aggregateForm.importData">
										</el-input>
									</el-form-item>
									<el-form-item v-if="radio1 == '从Excel中导入数据'">
										<el-upload
											name="excel" action="http://127.0.0.1:8000/api/excel"
											:limit="1" :drag='true' :show-file-list='true' :auto-upload='true'
											:before-upload="beforeUpload" :on-exceed="handleExceed" :on-success="uploadSuccess" :on-error="uploadFalse">
											<i class="el-icon-upload"></i>
											<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
										</el-upload>
									</el-form-item>
								</el-form>
							</div>

							<!-- 集结算子/决策方法/距离 贴近公式/得分函数 -->
							<div class="borderSingle singlePadding">
								<h5>集结算子/决策方法/距离 贴近公式/得分函数</h5>
								<el-form ref="form" :model="aggregateForm" label-width="80px" :inline="true">
									<!-- 集结算子 -->
									<el-form-item label="集结算子" style="margin-right:10%">
										<el-select v-model="aggregateForm.operator" placeholder="选择集结算子">
											<el-option v-for="item in operators" :key="item" :label="item" :value="item"></el-option>
										</el-select>
									</el-form-item>
									<!-- 决策方法 -->
									<el-form-item label="决策方法">
										<el-select v-model="aggregateForm.decision" placeholder="选择决策方法">
											<el-option v-for="item in decisions" :key="item" :label="item" :value="item"></el-option>
										</el-select>
									</el-form-item>
								</el-form>

								<el-form ref="form" :model="aggregateForm" label-width="80px" :inline="true">
								<!-- 距离/贴近公式 -->
									<el-form-item label="距离/贴近" style="margin-right:10%">
										<el-select v-model="aggregateForm.DisClo" placeholder="选择距离/贴近度公式">
											<el-option-group v-for="group in DisClos" :key="group.label" :label="group.label">
												<el-option v-for="item in group.options" :key="item" :label="item" :value="item"></el-option>
											</el-option-group>
										</el-select>
									</el-form-item>
									<!-- 得分函数 -->
									<el-form-item label="得分函数">
										<el-select v-model="aggregateForm.scoreFun" placeholder="选择得分函数">
											<el-option v-for="item in scoreFuns" :key="item" :label="item" :value="item"></el-option>
										</el-select>
									</el-form-item>
								</el-form>
							</div>

							<!-- 参数设置 -->
							<div class="borderSingle singlePadding">
								<h5>参数设置</h5>
								<el-form ref="form" :model="aggregateForm" label-width="80px" :inline="true">
									<!-- q值范围 -->
									<el-form-item label="q值范围" style="margin-right:10%">
										<el-input style="width:160px" v-model="aggregateForm.QMin" placeholder="q值最小值"></el-input>
										<span>  ~  </span>
										<el-input style="width:160px" v-model="aggregateForm.QMax" placeholder="q值最大值"></el-input>
									</el-form-item>
									<!-- 其他参数 -->
									<el-form-item label="其他参数">
										<el-input v-model="aggregateForm.otherParameter" placeholder="空格作为参数见的间隔"></el-input>
									</el-form-item>
								</el-form>
							</div>

							<!-- 专家权重/属性权重 -->
							<div class="borderSingle singlePadding">
								<h5>专家权重/属性权重</h5>
								<div style="display: flex;">
									<!-- 专家权重 -->
									<el-form ref="form" :model="aggregateForm" label-width="80px" style="margin-right:10%;width:330px;">
										<el-form-item label="专家权重">
											<el-radio-group v-model="radio2" size="medium">
												<el-radio-button label="手动输入"></el-radio-button>
												<el-radio-button label="选择方法"></el-radio-button>
											</el-radio-group>
										</el-form-item>
										<el-form-item label=" " >
											<el-input
												v-if="radio2 == '手动输入'"
												style="width:300px;"
												type="textarea" :autosize="{ minRows: 5, maxRows: 5}" :placeholder='demoExpertWeight'
												v-model="aggregateForm.expertWeight">
											</el-input>
											<el-select 
												v-if="radio2 == '选择方法'" 
												placeholder="选择专家权重方法"
												v-model="aggregateForm.expertWeight">
												<el-option v-for="item in expertWeightMethods" :key="item" :label="item" :value="item"></el-option>
											</el-select>
										</el-form-item>
									</el-form>

									<!-- 属性权重 -->
									<el-form ref="form" :model="aggregateForm" label-width="80px" style="margin-right:10%;width:330px;">
										<el-form-item label="属性权重">
											<el-radio-group v-model="radio3" size="medium">
												<el-radio-button label="手动输入"></el-radio-button>
												<el-radio-button label="选择方法"></el-radio-button>
											</el-radio-group>
										</el-form-item>
										<el-form-item  label=" " >
											<el-input
												v-if="radio3 == '手动输入'"
												style="width:300px;"
												type="textarea" :autosize="{ minRows: 5, maxRows: 5}" :placeholder='demoAttributeWeight'
												v-model="aggregateForm.expertWeight">
											</el-input>
											<el-select
												v-if="radio3 == '选择方法'" 
												placeholder="选择专家权重方法"
												v-model="aggregateForm.attributeWeight">
												<el-option v-for="item in attributeWeightMethods" :key="item" :label="item" :value="item"></el-option>
											</el-select>
										</el-form-item>
									</el-form>
								</div>
							</div>

							<!-- 集结 按钮 -->
							<div class="singlePadding btnCenter">
								<el-button type="primary" @click="aggregate">开始集结</el-button>
							</div>
						</div>
						<div v-else-if="active == 1">
							<!-- 集结矩阵 -->
							<div class="borderSingle singlePadding">
								<h5>集结矩阵</h5>
								<el-table :data="aggregationMatrix" height="300" max-height="300">
									<el-table-column fixed type="index" ></el-table-column>
									<el-table-column 
										class="oneLine" 
										v-for="i in Object.keys(aggregationMatrix[0]).length" :key="i" :prop="'X'+i" :label="'X'+i" 
										show-overflow-tooltip width="150">
										<template slot-scope="scope">
											<span>{{ scope.row['X' + i]}}</span>
										</template>
									</el-table-column>
								</el-table>
							</div>

							<!-- 属性权重 -->
							<div class="borderSingle singlePadding" style="margin-top:20px">
								<h5>属性权重</h5>
								<el-table :data="attributeWeightMatrix" height="300" max-height="300">
									<el-table-column fixed type="index"></el-table-column>
									<el-table-column v-for="i in Object.keys(attributeWeightMatrix[0]).length" :key="i" :prop="'X'+i" :label="'X'+i" width="150"></el-table-column>
								</el-table>
							</div>

							<!-- 返回集结/最后得分 按钮 -->
							<div class="singlePadding btnCenter">
								<el-button-group>
									<el-button @click="back" type="primary" icon="el-icon-arrow-left">返回集结</el-button>
									<el-button @click="next" type="primary">最后得分<i class="el-icon-arrow-right el-icon--right"></i></el-button>
								</el-button-group>
							</div>
						</div>
						<div v-else-if="active == 2">
							<!-- 最后得分 -->
							<div class="borderSingle singlePadding">
								<h5>最后得分</h5>
								<el-table :data="finalScore" height="300" max-height="300">
									<el-table-column > </el-table-column>
									<el-table-column 
										class="oneLine"
										v-for="i in Object.keys(finalScore[0]).length" :key="i" :prop="'X'+i" :label="'X'+i" 
										show-overflow-tooltip width="150">
										<template slot-scope="scope">
											<span>{{ scope.row['X' + i]}}</span>
										</template>
									</el-table-column>
								</el-table>
							</div>

							<!-- 图表展示 -->
							<div class="borderSingle  singlePadding">
								<h5>图表展示</h5>
								<LineChart v-bind="{finalScore: finalScore, QMin: aggregateForm.QMin}" />
							</div>

							<!-- 返回中间指标 按钮 -->
							<div class="singlePadding btnCenter">
								<el-button type="primary" @click="back">返回中间指标</el-button>
							</div>
						</div>

						<el-footer style="text-align: center;height:20px;margin-top:20px;">
							<el-link type="info" href="http://www.jxufe.edu.cn/">江西财经大学</el-link>&nbsp;
							<el-link type="info" href="http://software.jxufe.edu.cn/news-show-36.html"> 荟庐H212</el-link>
						</el-footer>
					</el-main>
				</el-container>
			</el-container>
    </el-container>
    
  </div>
</template>

<script>
import UserMenu from '../../components/userMenu.vue'
import Header from '../../components/header.vue'
import LineChart from '../../components/lineChart.vue'
import XLSX from "xlsx";
export default {
  data() {
    return {
			radio1: '手动输入数据',
			radio2: '手动输入',
			radio3: '手动输入',
			active: 0,
			aggregateForm: {
				excelName: '',	// 上传表格文件名
				importData: '',	// 手动输入数据
				operator: '',	// 算子
				decision: '', // 决策方法
				QMin: '',	// Q最小值
				QMax: '',	// Q最大值
				otherParameter: '', // 其他参数 通过空格区分
				scoreFun: '', // 得分函数
				expertWeight: '',	// 专家权重
				attributeWeight: '',	// 属性权重
			},

			operators: ['WA', 'Chquet', 'Einstein', 'Frank', 'Hamacher', 'Heronian', 'NA', 'PBM', 'OWA', 'PA'],
			decisions: ['ARAS', 'COPRAS', 'CRITIC', 'DEAS', 'EXPROM', 'MABAC', 'MACBRTH', 'MAUT', 'MOORA', 'TOPSIS'],
			DisClos: [{
				label: '距离公式',
				options: ['距离公式1', '距离公式2', '距离公式3', '距离公式4'],
			},{
				label: '贴进度公式',
				options: ['贴进度公式1', '贴进度公式2', '贴进度公式3', '贴进度公式4'],
			}],
			scoreFuns: ['SX (Xu, 2007)', 'SL(Liu、Wang, 2020)', 'SNWC(Wang、Chen, 2018)', 'SGM(Gong、Ma, 2019)'],
			expertWeightMethods: ['EW1', 'EW2', 'EW3', 'EW4'],
			attributeWeightMethods: ['AW1', 'AW2', 'AW3', 'AW4'],
			demoExpertWeight: 
				"例：[[0.2,0.2,0.2,0.2,0.2],	\
				 		  [0.2,0.2,0.2,0.2,0.2],	\
				 			[0.2,0.2,0.2,0.2,0.2],	\
				 			[0.2,0.2,0.2,0.2,0.2],	\
				 			[0.2,0.2,0.2,0.2,0.2]]",
			demoAttributeWeight: '例：[0.2,0.2,0.2,0.2,0.2]',

			aggregationMatrix: [],
			attributeWeightMatrix:[
				{
                    X1: "0.2",
                    X2: "0.1",
                    X3: "0.1",
                    X4: "0.2",
                    X5: "0.2",
                    X6: "0.2",
                  },
                  {
                    X1: "0.2",
                    X2: "0.1",
                    X3: "0.1",
                    X4: "0.2",
                    X5: "0.2",
                    X6: "0.2",
                  },
                  {
                    X1: "0.2",
                    X2: "0.1",
                    X3: "0.1",
                    X4: "0.2",
                    X5: "0.2",
                    X6: "0.2",
                  },
                  {
                    X1: "0.2",
                    X2: "0.1",
                    X3: "0.1",
                    X4: "0.2",
                    X5: "0.2",
                    X6: "0.2",
                  },
                  {
                    X1: "0.2",
                    X2: "0.1",
                    X3: "0.1",
                    X4: "0.2",
                    X5: "0.2",
                    X6: "0.2",
                  },
                  {
                    X1: "0.2",
                    X2: "0.1",
                    X3: "0.1",
                    X4: "0.2",
                    X5: "0.2",
                    X6: "0.2",
                  },
                  {
                    X1: "0.2",
                    X2: "0.1",
                    X3: "0.1",
                    X4: "0.2",
                    X5: "0.2",
                    X6: "0.2",
                  },
                  {
                    X1: "0.2",
                    X2: "0.1",
                    X3: "0.1",
                    X4: "0.2",
                    X5: "0.2",
                    X6: "0.2",
                  },
			],
			finalScore:[],
		};
  },
  components:{
    UserMenu, Header, LineChart
  },
  methods: {
		async aggregate(){
			let res = await this.sendAggregateRespose()
			if (res.data.msg != 'success') {
				this.$message.error(res.data.msg);
				return
			}
			// console.log(res);
			await this.renderData(res)
			if (res.data.msg == "success") {
				this.active += 1
			}
		},
		async sendAggregateRespose(){
			return await this.$axios.get('http://127.0.0.1:8000/api/singleAggregate?body=' + JSON.stringify(this.aggregateForm))
		},
		renderData(res){
			// console.log(res);
			
			// 集结矩阵
			this.aggregationMatrix = []
			let arr_x = res.data.aggregationMatrix.substring(3, res.data.aggregationMatrix.length - 2).split('], [(')
			for (let i = 0; i < arr_x.length; i++) {
				let aggregationObj = {}
				let arr_y = arr_x[i].substring(0, arr_x[i].length).split(', (')	
				for (let j = 0; j < arr_y.length; j++) {
					aggregationObj['X' + (j + 1)] = '(' + arr_y[j]
				}
				this.aggregationMatrix.push(aggregationObj)
			}
			// console.log('aggregationMatrix', this.aggregationMatrix);

			// 最终得分
			this.finalScore = []
			for (let i = 0; i < res.data.finalScore.length; i++) {
				let finalScoreObj = {}
				for (let j = 0; j < res.data.finalScore[0].length; j++) {
					finalScoreObj['X' + (j + 1)] = res.data.finalScore[i][j]
				}
				this.finalScore.push(finalScoreObj)
			}
			// console.log(this.finalScore);
		},
		back(){ this.active -= 1 },
		next(){ this.active += 1 },
    
    beforeUpload(file) {
      let hz = file.name.split(".")[1]
      if (hz != 'xlsx' && hz != 'xls') {
				this.$message.warning('请上传xlsx/xls格式的文件!')
        return false;
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`)
    },
		uploadSuccess(response, file, fileList) {
			// console.log(response)
			this.aggregateForm.excelName = response.excelName
		},
    uploadFalse(response, file, fileList) {
			// console.log(response);
      this.$message.error('excel文件上传失败!');
    },
  }
}
</script>

<style>
.aggregatePage{
  width: 100%;
  height: 100%;
}
.el-upload-dragger{
	height: 117px;
	overflow: inherit;
}
.el-upload-dragger .el-icon-upload{
	margin: 10px 0 6px
}
h5 {
	padding: 10px 0 5px 10px;
	margin: 0;
}
.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.el-aside, .el-main {
  height: calc(100vh - 60px);
}
.borderSingle{
	border: 1px solid #ccc; 
	border-radius: 4px;
}
.singlePadding{
	margin: 10px 10%;
}
.btnCenter{
	display: flex;
	justify-content: center;
}
</style>